How do you wrap or prevent wrapping of text in a container?

Controlling Text Wrapping in CSS

CSS provides properties to control whether text wraps inside a container or stays on a single line. This is useful for UI elements like buttons, cards, table cells, or headers.

Key CSS Properties for Wrapping

white-space: normal; – Default behavior. Text wraps to a new line as needed.
white-space: nowrap; – Prevents text from wrapping; text stays on a single line.
white-space: pre; – Preserves whitespace and line breaks exactly as in the source.
white-space: pre-wrap; – Preserves whitespace and line breaks, but wraps long lines.
white-space: pre-line; – Collapses multiple spaces into one but preserves line breaks.

Example: Prevent Text Wrapping

Example: Allow Text Wrapping

In the .no-wrap example, text stays on a single line and overflows are hidden or truncated. In the .wrap example, long text wraps naturally to fit the container width.

Key Takeaways

Use nowrap to prevent wrapping for single-line elements like buttons or labels.
Use normal or pre-wrap for paragraphs or multi-line text that should adjust to container width.
pre and pre-line are useful for preformatted text, code snippets, or content where line breaks matter.
Combine with overflow and text-overflow for controlled truncation in fixed-size containers.

Question Loading...

Transformation and Transition

Frameworks

Everything else